<template>
  <div class="report">
    <Directory
      ref="directory"
      :title="'评价报告'"
      @groupChange="groupChange"
    />
    <transition name="fade-transform" mode="out-in">
      <DataTable
        v-if="showList"
        ref="DataTable"
        :group-id="groupId"
        :group-item="groupItem"
        @updateFolder="onUpdateFolder"
      />
      <Check
        v-else
        :check-data="checkData"
        :click-last="clickLast"
        :req-params="reqParams"
        :only-check="onlyCheck"
      />
    </transition>
  </div>
</template>

<script>
import Directory from './directory'
import DataTable from './dataTable.vue'
import Check from './check.vue'

export default {
  name: 'Report',
  components: { Directory, DataTable, Check },
  data() {
    return {
      groupId: 0,
      showList: true,
      checkData: {},
      clickLast: false,
      reqParams: {},
      groupItem: {},
      onlyCheck: false
    }
  },
  methods: {
    // 监听更新文件夹
    onUpdateFolder(from) {
      // 重新刷新
      // from 参数：重哪个页面调用的，
      // 如果 from = report，就是普通报告页面
      // 如果 from = del 从回收站页面
      // 如果 from = star 从收藏页面
      switch (from) {
        case 'report':
          this.$refs.directory.loadData(true)
          break

        case 'del':
          this.$refs.directory.updateFolder(true)
          break

        case 'star':
          break

        default:
          break
      }
    },
    // 文件夹发生点击事件 data 就是当前选中的 tree node value
    groupChange(data) {
      console.log('groupChange')
      console.log(data)
      let obj = {}

      // 如果为 string ，代表点击的是 回收站/收藏夹
      if (typeof data === 'string') {
        // obj[del] = 1  obj[star] = 1
        obj[data] = 1
      } else {
        // 点击的是文件夹
        obj = data
      }
      this.groupItem = obj
      this.groupId = obj.id
      this.showList = true
    },
    moudleChange(flag, data, isLast, reqParams, onlyCheck) {
      this.showList = flag
      this.checkData = data || {}
      this.clickLast = isLast
      this.reqParams = reqParams || {}
      this.onlyCheck = !!onlyCheck
    }
  }
}
</script>

<style lang="scss" scoped>
.report{
	width: 1920px;
	background-color: #F6F6F6;
	display: flex;
	border-radius: 8px;
  margin: 0 auto;
}
</style>
